.cart-icon {
  color: @cart-icon-text;
  border: @cart-icon-border;
  padding: @cart-icon-padding;
  border-radius: @cart-icon-border-radius;
  position: relative;
  background-color: @cart-icon-bg;
  height: @navbar-height;
  @media screen and (max-width: @screen-xs-max) {
    width:  @navbar-height;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  i {
    @media screen and (max-width: @screen-xs-max) {
      font-size: 22px;
    }
  }
  a i {
    color: @cart-icon-color;
    background-color: transparent;
  }

  &:hover {
    background-color: lighten(@cart-icon-bg, 2%);
  }

  .badge {
    @size: 20px;
    position: absolute;
    bottom: 4px;
    .right(4px);
    background-color: @cart-icon-badge;
    // padding: 4px 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: @size;
    height: @size;
    max-width: @size;
    max-height: @size;
    min-width: @size;
    min-height: @size;
    border-radius: @size / 2;
    font-weight: 300;
    @media screen and (max-width: @screen-xs-max) {
      bottom: 8px;
      .right(7px);
    }
  }

  .badge-warning {
    .right(33px);
    font-weight:bold;
    font-size:inherit;
    padding:2px 8px 2px 8px;
    background-color: @cart-icon-badge-warning;
  }

  @media screen and (max-width: @screen-xs-max) {
    padding: 10px;
  }
}
.cart-alert{
  .float(right);
  position: fixed;
  top: 0;
  .right(76px);
  color: @cart-icon-text;
  background-color: @cart-icon-bg;
  display: none;
  z-index: @zindex-modal + 1;
  box-shadow: 0 5px 5px -5px @dropdown-border;
  .cart-alert-text {
    padding: @navbar-padding-vertical;
    height:  @navbar-height;
    min-width: 225px;
    max-width: 300px;
  }
  .cart-alert-checkout {
    height:  @navbar-height;
    padding-left: @navbar-padding-vertical;
    padding-right: @navbar-padding-vertical;
    min-width: 225px;
    max-width: 300px;
    white-space: nowrap;
  }
}

.navbar-cart:hover{
  cursor: pointer;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}
